<template>
  <div class="supplier-detail">
    <van-loading v-if="loading" size="24px">加载中...</van-loading>
    
    <template v-else>
      <van-cell-group>
        <!-- 将静态显示改为可编辑字段 -->
        <van-field
          v-model="editableSupplier.name"
          label="供应商名称"
          placeholder="请输入供应商名称"
          :readonly="!isEditing"
        />
        <van-field
          v-model="editableSupplier.contactPerson"
          label="联系人"
          placeholder="请输入联系人"
          :readonly="!isEditing"
        />
        <van-field
          v-model="editableSupplier.contactEmail"
          label="联系邮箱"
          placeholder="请输入联系邮箱"
          :readonly="!isEditing"
        />
        <van-field
          v-model="editableSupplier.contactPhone"
          label="联系电话"
          placeholder="请输入联系电话"
          :readonly="!isEditing"
        />
        <van-field
          v-model="editableSupplier.address"
          label="地址"
          placeholder="请输入地址"
          :readonly="!isEditing"
          type="textarea"
          autosize
        />
        
        <!-- 只读信息 -->
        <van-cell title="供应商ID" :value="supplier.supplierId" />
        <van-cell title="创建人" :value="supplier.createBy" />
        <van-cell title="创建时间" :value="formatTime(supplier.createTime)" />
        <van-cell title="最后更新人" :value="supplier.updateBy" />
        <van-cell title="最后更新时间" :value="formatTime(supplier.updateTime)" />
      </van-cell-group>
      
      <div class="action-buttons">
        <van-button
          v-if="!isEditing"
          type="primary"
          size="large"
          @click="startEditing"
        >
          编辑
        </van-button>
        
        <template v-else>
          <van-button
            type="success"
            size="large"
            @click="saveChanges"
          >
            保存
          </van-button>
          <van-button
            type="default"
            size="large"
            @click="cancelEditing"
          >
            取消
          </van-button>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getSupplierDetail, updateSupplier } from '@/api/supplier'
import { showFailToast, showSuccessToast, showConfirmDialog } from 'vant'

export default {
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    const supplier = ref({})
    const editableSupplier = ref({}) // 可编辑的数据副本
    const loading = ref(true)
    const isEditing = ref(false) // 编辑状态
    
    // 时间格式化
    const formatTime = (timestamp) => {
      if (!timestamp) return '-'
      return new Date(timestamp).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
    
    const fetchSupplierDetail = async () => {
      try {
        loading.value = true
        const { data } = await getSupplierDetail(props.id)
        supplier.value = data
        editableSupplier.value = { ...data } // 创建可编辑副本
      } catch (error) {
        console.error('获取供应商详情失败:', error)
        showFailToast('获取供应商详情失败')
      } finally {
        loading.value = false
      }
    }
    
    // 开始编辑
    const startEditing = () => {
      isEditing.value = true
    }
    
    // 取消编辑
    const cancelEditing = async () => {
      try {
        await showConfirmDialog({
          title: '确认',
          message: '确定要放弃已修改的内容吗？'
        })
        editableSupplier.value = { ...supplier.value } // 恢复原始数据
        isEditing.value = false
      } catch {
        // 用户点击了取消，不做任何操作
      }
    }
    
    // 保存修改
    const saveChanges = async () => {
      try {
        loading.value = true
        await updateSupplier(props.id, editableSupplier.value)
        showSuccessToast('更新成功')
        isEditing.value = false
        fetchSupplierDetail() // 重新获取最新数据
      } catch (error) {
        console.error('更新失败:', error)
        showFailToast('更新失败')
      } finally {
        loading.value = false
      }
    }
    
    onMounted(() => {
      fetchSupplierDetail()
    })
    
    return {
      supplier,
      editableSupplier,
      loading,
      isEditing,
      formatTime,
      startEditing,
      cancelEditing,
      saveChanges
    }
  }
}
</script>

<style scoped>
.supplier-detail {
  padding-bottom: 60px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin: 16px;
}

.action-buttons .van-button {
  flex: 1;
}
</style>